<template>
  <div>
    <el-table :data="page.records" :hightlight-current-row="hightlightCurrentRow" @selection-change="selectionChange"
    @current-change="handleCurrentHandle" v-loading="loading" element-loading-text="加载中" :border="border" :stripe="stripe"
    :show-overflow-tooltip="showOverflowTooltip" :max-height="maxHeight" :size="size" :align="align" style="width: 100%;">
      <el-table-column type="selection" width="40" v-if="showBatchDelete & showOperator"></el-table-column>
      <el-table-column v-for="column in columns" header-align="center" align="center"
                       :prop="column.prop" :label="column.label" :width="column.width" :min-width="column.minWidth"
                       :fixed="column.fixed" :key="column.prop" :type="column.type" :formatter="column.formatter"
                       :sortable="column.sortable==null?true:column.sortable">
      </el-table-column>
      <el-table-column label="操作" width="185" fixed="right" v-if="showOperation" header-align="center" align="center">
        <template slot-scope="scope">
          <perm-button icon="fa fa-edit" label="编辑" :perms="permsEdit" :size="size" @click="handleEdit(scope.$index, scope.row)" />
          <perm-button icon="fa fa-trash" label="删除" :perms="permsDelete" :size="size" type="danger" @click="handleDelete(scope.$index, scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="toolbar" style="padding: 10px;">
      <perm-button label="批量删除" :perms="permsDelete" :size="size" type="danger" @click="handleBatchDelete()"
                   :disabled="this.selections.length===0" style="float:left;" v-if="showBatchDelete & showOperation"></perm-button>
      <el-pagination v-if="page.records && page.records.length >= 1"
                     background
                     layout="prev, pager, next"
                     :total="page.total"
                     :current-page="page.current"
                     :page-size="page.size"
                     @current-change="refreshPageRequest"
                     style="float:right;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import PermButton from '../PermButton/Index'
export default {
    name: 'PermTable',
    components: { PermButton },
    props: {
        columns: Array, // 表格列配置
        page: Object, // 表格分页数据
        permsEdit: String, // 编辑权限标识
        permsDelete: String, // 删除权限标识
        size: { // 尺寸样式
            type: String,
            default: 'mini'
        },
        align: { // 文本对齐方式
            type: String,
            default: 'left'
        },
        maxHeight: { // 表格最大高度
            type: Number,
            default: 1000
        },
        showOperator: { // 是否显示操作组件
            type: Boolean,
            default: true
        },
        border: { // 是否显示边框
            type: Boolean,
            default: false
        },
        stripe: { // 是否显示斑马线
            type: Boolean,
            default: true
        },
        hightlightCurrentRow: { // 是否高亮显示当前行
            type: Boolean,
            default: true
        },
        showOverflowTooltip: { // 是否单行显示
            type: Boolean,
            default: true
        },
        showOperation: { // 是否显示操作组件
            type: Boolean,
            default: true
        },
        showBatchDelete: { // 是否显示批量删除组件
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            pageRequest: {
                current: 1,
                size: 10
            },
            loading: false, // 加载标识
            selections: [] // 列表选中列
        }
    },
    methods: {
    // 分页查询
        findPage: function() {
            this.loading = true
            const callback = res => {
                this.loading = false
            }
            this.$emit('findPage', { pageRequest: this.pageRequest, callback: callback })
        },
        // 切换选择
        selectionChange: function(selections) {
            this.selections = selections
            this.$emit('selectionChange', { selections: selections })
        },
        // 当前选择
        handleCurrentHandle: function(val) {
            this.$emit('handleCurrentHandle', { val: val })
        },
        // 刷新页面
        refreshPageRequest: function(current) {
            this.pageRequest.current = current
            this.findPage()
        },
        // 编辑
        handleEdit: function(index, row) {
            this.$emit('handleEdit', { index: index, row: row })
        },
        // 删除
        handleDelete: function(index, row) {
            this.$emit('handleDelete', { index: index, row: row })
        },
        // 批量删除
        handleBatchDelete: function() {
            const ids = this.selections.map(item => item.id).toString()
            this.delete(ids)
        },
        // 删除操作
        delete: function(ids) {
            this.$confirm('确认删除选中记录吗？', '提示', {
                type: 'warning'
            }).then(() => {
                const params = []
                const idArray = (ids + '').split(',')
                for (let i = 0; i < idArray.length; i++) {
                    params.push({ 'id': idArray[i] })
                }
                this.loading = true
                const callback = res => {
                    if (res.success) {
                        this.$message({ message: '删除成功', type: 'success' })
                        this.findPage()
                    } else {
                        this.$message({ message: '删除失败', type: 'error' })
                    }
                    this.loading = false
                }
                this.$emit('handleDelete', { params: params, callback: callback })
            }).catch(() => {})
        }
    },
    mounted() {
        this.refreshPageRequest(1)
    }
}
</script>

<style scoped>

</style>
